<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <link rel="stylesheet" href="../lib/base.css" />
   <link rel="stylesheet" href="slide.css" />
   <script src="../lib/jquery.js" type="text/javascript"></script>
   <script type="text/javascript">
   function SlideWidget($slide){
  	 var $nav_childs = $slide.find('.ks-switchable-nav li');
  	 var $con_childs = $slide.find('.ks-switchable-content li');
  	 var $ks_content = $slide.find('.ks-switchable-content');
  	 $ks_content[0].style.position = "absolute";
  	 $ks_content[0].style.top = 0;
  	 var debug = document.getElementById('debug');
  	 var debugNum = 0;
  	 //容器高度
  	 var h = parseInt($ks_content.css('height'));
  	 
  	 //interval标识
  	 var t = null; 
  	 var tl = null; 
  	 var ta = null;
  	 
  	 //当前激活的位置
  	 var n = 0;
  	 //上一个激活的位置
  	 var last = 0;
  	 var step = 10;
  	 //滚动总个数
  	 var count = $nav_childs.length;
  	 
  	 //遍历组件 设置初始样式
  	 for(var j=0;j<count;j++){
  	 	  if(j==0){
  	 		  $nav_childs[j].className = "ks-active";
  	 	  }else{
  	 		  $nav_childs[j].className = "";
  	 		  $con_childs[j].style.display = "block";
  	 	  }
  	 }
	 
  	 //设置初始激活元素
  	 var $active_elm = $nav_childs.eq(0);
  	 var $active_con_elm = $con_childs.eq(0);
  	 
	 
	 //从开始到结束应该滚动的距离
	 var distance = 0; 
	//正负标识
	 var flag = 0;  
	 
  	 //周期自动运行函数
  	 function autoShow(){
  	 	  return function(){
  	 		if(t){
    			  clearInterval(t);
   			  t = null;
   			  var cur_top = parseInt($ks_content[0].style.top);
   			  var top = cur_top - flag*(Math.abs(n-last)*h-distance);
  			  last = n;
  			  //不能将上面代码合并到下一行top处，合并会出现滚动空白： 原因不明
  			  $ks_content[0].style.top  = top + 'px';  
    			  distance = 0;
    		  }
  	 		 if(ta){
  	  			  clearInterval(ta);
  		 		  ta = null;
  		 		  $con_childs[0].style.position = "";
  		   	  	  $con_childs[0].style.top = "";
  		   	  	  $ks_content[0].style.top = 0;
  		   	  	  n=0;
  	 			  last = n;
  	  		  }
  	   	  	  if(n<count-1){
  	   	  			++n;
  	   	  	 	  $nav_childs.eq(n).trigger('click');
  	   	  		  
  	   	  	  }else{
  	   	  		 $con_childs[0].style.position = "relative";
  	   	  		 $con_childs[0].style.top = h*count+'px';
  	   	  		 
	  	   	  	 $active_elm.removeClass('ks-active');
				 var $nav_first = $nav_childs.eq(0);
				 $nav_first.addClass('ks-active');
	  	  	 	 $active_elm = $nav_first;
	  	   	  	 
	  	  	 	 var d = 0;
  	   	  		 ta = setInterval(function(){
	  	  	 		  var cur_top = parseInt($ks_content[0].style.top);
	  	  	 		  var top = 0;
	  	  	 		  
	  	  	 		  if(d+step >= h){
	  	  	 			  clearInterval(ta);
	  	  	 			  ta = null;
	  		 			  d = 0;
	  		 			  n = 0;
	  		 			  last = 0;
	  		 			 $con_childs[0].style.position = "";
	  	  	   	  		 $con_childs[0].style.top = "";	  	  	   	  		
	  	  	   	  		 $ks_content[0].style.top = 0;
	  	  	   	  			
	  		 		  }else{
	  		 			  top = cur_top - step;
	  		  	 	      d += step;
	  		  	 	 	  $ks_content[0].style.top  = top + 'px';
	  		 		  }  
	  	  	 	  },10);
  	   	  	  }
  	   	 	  
  	 	  }
  	 }
  	 
	 //nav标签激活事件
  	 $nav_childs.click(function(){
  		  //上次定时事件未执行完时，致为最终状态
  		  if(t){
  			  clearInterval(t);
 			  t = null;
 			  var cur_top = parseInt($ks_content[0].style.top);
 			  var top = cur_top - flag*(Math.abs(n-last)*h-distance);
			  last = n;
			  //不能将上面代码合并到下一行top处，合并会出现滚动空白： 原因不明
			  $ks_content[0].style.top  = top + 'px';  
  			  distance = 0;
  		  }
  		  if(ta){
  			  clearInterval(ta);
	 		  ta = null;
	 		  $con_childs[0].style.position = "";
	   	  	  $con_childs[0].style.top = "";
	   	  	  $ks_content[0].style.top = 0;
	   	  	  n=0;
 			  last = n;
  		  }
  		  
		  //当前nav激活位置
  	 	  n = $(this).index();
		  
		  //n-last>0向上滚动   n-last<0向下滚动
  	 	  flag = (n-last>0) ? 1 : -1;
  	 	  
  	 	  //设置nav激活时的className
  	 	  $active_elm.removeClass('ks-active');
  	 	  $(this).addClass('ks-active');
  	 	  $active_elm = $(this);
  	 	 
  	 	  t = setInterval(function(){
  	 		  //获取当前nav_content的position--top值 
  	 		  var cur_top = parseInt($ks_content[0].style.top);
  	 		  var top = 0;
  	 		  if(distance+step >= Math.abs(n-last)*h){
  	 			  clearInterval(t);
  	 			  t = null;
	 			  top = cur_top - flag*(Math.abs(n-last)*h-distance);
	 			  distance = 0;
	 			  last = n;
	 		  }else{
	  	 		  top = cur_top - flag*step;
	  	 	      distance += step;
	 		  }
  	 		
  	 		  $ks_content[0].style.top  = top + 'px';
  	 		  
  	 	  },10);

  	 });
  	 
	 //鼠标激活ks-nav时触发点击事件
  	 $nav_childs.hover(function(){
  		 clearInterval(tl);
  		 $(this).trigger('click');
  	 },function(){
  		 tl = setInterval(autoShow(),3000);
  	 });
  	 
  	 tl = setInterval(autoShow(),3000);
  	 
   }
     $(document).ready(function(){
    	 //获取J_TWidget集合
      	 var $w_collect = $('.J_TWidget');
    	 
    	 //执行相应的组件事件
      	 $w_collect.each(function(index){
      		 if($(this).data('widget-type')=='Slide'){
      			 new SlideWidget($(this));
      		 }
      	 });
    	
     })
   </script>
 </head>
 <body>
<div class="J_TWidget slide" data-widget-type="Slide" data-widget-config="{'effect':'scrolly','easing':'easeOutStrong','countdown':true}">
	<ul class="ks-switchable-nav">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
	<ol class="ks-switchable-content">
	    <li class="">
	        <a href="#" target="_blank">
	            <img alt="" src="images/1.jpg"/>
	        </a>
	    </li>
	    <li class="hidden">
	        <a target="_blank" href="#">
	            <img alt="" width="470" height="150" border="0" src="images/2.jpg"/>
	        </a>
	    </li>
	    <li class="hidden">
	        <a target="_blank" href="#">
	            <img alt="" width="470" height="150" border="0" src="images/3.jpg"/>
	        </a>
	    </li>
	    <li class="hidden">
	        <a href="#" target="_blank">
	            <img alt="" src="images/4.jpg"/>
	        </a>
	    </li>
	    <li class="hidden">
	        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="150" class="holiday-logo">
	            <param name="movie" value="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf"/>
				<param name="quality" value="high"/><param name="swfversion" value="8.0.0"/>
				<param name="wmode" value="opaque"/>
	            <!--[if !IE]>-->
	                <object type="application/x-shockwave-flash" data="http://img04.taobaocdn.com/tps/i4/T1bblrXfBrXXXXXXXX.swf" 
					width="470" height="150" name="holiday-logo" class="holiday-logo">
	                    <param name="wmode" value="opaque"/>
	                </object>
	            <!--<![endif]-->
	        </object>
	    </li>
	</ol>
</div>

<div id="debug"></div>
</body>
</html>